<template>
  <div class="allifo">
    <h1 style="color:black">欢迎，{{studentName}}</h1>
    <Student :msg1="msg2"></Student>
    <School @showSchool="showSchool"></School>
    <p style="background-color:black;">学校地址：{{address_school}}</p>
    <button @click="showFriend">显示学生名</button>
  </div>
</template>

<script>
  import b from "./components/Student.vue"
  import c from "./components/School.vue"
  export default {
    name:"App",
    data(){
      return {
        msg2:'这是一条父组件上的数据',
        studentName:'suliang',
        address_school:''
      }
    },
    components:{
      Student:b,
      School:c
    },
    methods:{
        showSchool(data){
          this.address_school = data
        },
        showFriend(){
          this.$bus.$emit("ShowstudentName",this.studentName)
        }
    },
    mounted(){
      this.$bus.$on('showName',(data)=>{
          console.log(data);
      }),
      this.$bus.$on('showMsg',(data)=>{
          console.log(data)
      })
    },
    
    beforeDestroy(){
      this.$bus.$off('showName','showMsg')
    }
  }
</script>

<style>
  .allifo{
    color:white;
  }
</style>